<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>天气案例-监视属性</title>
  <!-- 引入Vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<!-- 
    监视属性watch：
      1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作
      2.监视的属性必须存在，才能进行监视！！
      3.监视的两种写法：
          (1).new Vue时传入watch配置
          (2).通过vm.$watch监视
 -->

<body>
  <!-- 准备好一个容器-->
  <div id="root">
    <h2>今天天气很{{info}}</h2>
    <button @click="changeWeather">切换天气</button>
  </div>
</body>

<script type="text/javascript">
  Vue.config.productionTip = false; // 阻止Vue在启动时生成生产提示。

  const vm = new Vue({
    el: "#root",
    data: {
      isHot: true
    },
    computed: {
      info() {
        return this.isHot ? "炎热" : "凉爽";
      }
    },
    methods: {
      changeWeather() {
        this.isHot = !this.isHot;
      }
    },
    watch: {
      isHot: {
        immediate: true, // 初始化时让handler调用一下
        // 当isHot发生改变时,handler调用？
        hander(newValue, oldValue) {
          console.log("isHot被修改了", newValue, oldValue);
        }
      }
    }
  });

  /*  // 第二种写法
   vm.$watch("isHot", {
     immediate: true,
     hander(newValue, oldValue) {
       console.log("isHot被修改了", newValue, oldValue);
     }
   }); */
</script>

</html>